<script setup>
import breaks from '@bytemd/plugin-breaks'
import frontmatter from '@bytemd/plugin-frontmatter' // 解析前题
import gemoji from '@bytemd/plugin-gemoji'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight' // 代码高亮
import mediumZoom from '@bytemd/plugin-medium-zoom' // 缩放图片
import { Viewer } from '@bytemd/vue-next'
import zhHans from 'bytemd/locales/zh_Hans.json'
import 'bytemd/dist/index.css'
// 掘金同款样式
import 'juejin-markdown-themes/dist/juejin.min.css'

const props = defineProps({
  articleInfo: {
    type: Object,
    default: () => ({}),
  },
})

// 插件
const pluginsList = [
  gfm(),
  gemoji(),
  highlight(),
  frontmatter(),
  mediumZoom(),
  breaks(),
]
// 数据初始化
const state = reactive({
  value: props.articleInfo.content,
  plugins: markRaw(pluginsList),
  zh: zhHans,
})
const { value, plugins, zh } = toRefs(state)
</script>

<template>
  <AppCard bordered class="w-full border-rd-5 p-20">
    <!-- 文章标题 -->
    <span class="font-size-32 fw-600">{{ articleInfo.title }}</span>

    <!-- 作者和日期 -->
    <div class="mt-20 flex">
      <span class="mr-20">{{ articleInfo.author.nickName }}</span>
      <span class="mr-20 op-text">{{ articleInfo.releaseTime }}</span>
      <span class="mr-20 f-c-c op-text">
        <i class="i-fe:eye mr-5" />
        <span>{{ articleInfo.articleMetric.viewCount }}</span>
      </span>
    </div>

    <!-- 文章内容 -->
    <div class=" ">
      <Viewer
        class="markdown-body"
        :locale="zh"
        :value="value"
        :plugins="plugins"
      />
    </div>

    <!-- 标签 -->
    <div class="mb-20 mt-70 op-text">
      <span class="mr-20 us">标签:</span>
      <el-tag
        v-for="(tag, index) in articleInfo.tags"
        :key="index"
        class="mr-10 us cursor-pointer-text-hover"
        type="info"
        size="large"
      >
        {{ tag.name }}
      </el-tag>
    </div>
  </AppCard>
</template>

<style scoped></style>
